HTML Tutorial - 
(HTML5 Compliant) 


ECHOMYKE 



1.0 HTML Introduction 


HTML Example 

<!DOCTYPE html> 

<html> 

<body> 

<hl>My First Heading</hl> 

<p>My first paragraph.</p> 

</body> 

</html> 
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Explanation 


The DOCTYPE declaration defines the Document Type 

• The text between <html> and </html> describes the Web Page 

• The text between <body> and </body> is the visible Page 
Content 

• The text between <h1> and </h1> is displayed as a Heading 

• The text between <p> and </p> is displayed as a Paragraph 
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What Is HTML? 


• HTML is a language for describing web 
pages. 

• HTML stands for Hyper Text Markup 
Language 

• HTML is a markup language 

• A markup language is a set of markup tags 

• The tags tells the browser how to display 
the page content 
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HTML Tags 

•HTML markup tags are usually called HTML tags 

•HTML tags are keywords (tag names) surrounded by angle 
brackets like <html> 

•HTML tags normally come in pairs like <b> and </b> 

•The first tag in a pair is the start tag, the second tag is the 
end tag 

•The end tag is written like the start tag, with a forward 
slash before the tag name 

•Start and end tags are also called opening tags and 
closing tags 
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HTML Elements 


"HTML tags" and "HTML elements" are often used to 
describe the same thing. 

But strictly speaking, an HTML element is everything 
between the start tag and the end tag, including the tags 

HTML Element: 

<p>This is a paragraph.</p> 
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Web Browsers 


The purpose of a web browser (such as Google Chrome, 
Internet Explorer, Firefox, Safari) is to read HTML documents 
and display them as web pages. 

The browser does not display the HTML tags, but uses the tags 
to determine how the content of the HTML page is to be 
presented/displayed to the user: 

<!DOCTYPE html> 

<html> 

<body> 

<hl>ECHOMYKE ACADEMY</h1> 


<p>Web Programming Academy.</p> 

</body> 

</html> 
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Visualization Of A HTML Page Structure 


<html> 


<body> 


<hl>This a heading</hl> 


<p>This is a paragraph.</p> 


<p>This is another paragraph.</p> 


</body> 


</html> 
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2.0 HTML BASICS 
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HTML Headings 


HTML headings are defined with the <h1> to <h6> tags. 
Example 

<h1>This is a heading</h1> 

<h2>This is a heading</h2> 

<h3>This is a heading</h3> 


ECHOMYKE 



HTML Paragraphs 

HTML paragraphs are defined with the <p> tag. 
Example 

<p>This is a paragraph.</p> 

<p>This is another paragraph.</p> 
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HTML Links 


HTML links are defined with the <a> tag. 
Example 


<a href="http://www.google.com">This is a link</a> 


ECHOMYKE 



HTML Images 


HTML images are defined with the <img> tag. 
Example 


<img src=“picture.jpg" width="104" height="142"> 
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3.0 HTML ELEMENTS 
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HTML Elements 


An Html Element Is Everything From The Start Tag 
To The End Tag: 


Start tag * 

Element content 

End tag * 

<p> 

This is a paragraph 

</p> 

<a 

This is a link 

</a> 

href = "default.htm" > 



<fec> 


* The start tag is often called the opening tag. The end tag is often 
called the dosing tag. 
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HTML Element Syntax 

•An HTML element starts with a start tag / opening tag 

•An HTML element ends with an end tag / closing tag 

•The element content is everything between the start and 
the end tag 

•Some HTML elements have empty content 
•Empty elements are closed in the start tag 
•Most HTML elements can have attributes 
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Nested HTML Elements 

Most HTML elements can be nested (can contain other 
HTML elements). 

HTML documents consist of nested HTML elements. 

HTML Document Example 

<!DOCTYPE html> 

<html> 

<body> 

<p>This is my first paragraph.</p> 

</body> 

</html> 

The example above contains 3 HTML elements. 
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HTML Example Explained 


The <p> element: 


<p>This is my first paragraph.</p> 


The <p> element defines a paragraph in the HTML document. 
The element has a start tag <p> and an end tag </p>. 

The element content is: This is my first paragraph. 
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HTML Example Explained Cont 


The <body> element: 


<body> 

<p>This is my first paragraph.</p> 

</body> 

The <body> element defines the body of the HTML document. 
The element has a start tag <body> and an end tag </body>. 
The element content is another HTML element (a p element). 
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HTML Example Explained Cont 


The <html> element: 


<html> 

<body> 

<p>This is my first paragraph.</p> 
</body> 

</html> 


The <html> element defines the whole HTML document. 
The element has a start tag <html> and an end tag </html>. 
The element content is another HTML element (the body 
element). 
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Important To Note! 

Don't Forget the End Tag 

Some HTML elements might display correctly even if you forget the end tag: 

<p>This is a paragraph 
<p>This is a paragraph 


The example above works in most browsers, because the closing 
tag is considered optional. 

Never rely on this. Many HTML elements will produce unexpected 
results and/or errors if you forget the end tag . 
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Empty HTML Elements 


HTML elements with no content are called empty elements. 

<br> is an empty element without a closing tag (the <br> tag 
defines a line break). 
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HTML Tip: Use Lowercase Tags 


HTML tags are not case sensitive: <P> means the same as <p>. 
Many web sites use uppercase HTML tags. 

Note: We advise to always use lowercase 
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4.0 HTML ATTRIBUTES 
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HTML Attributes: 

Attributes Provide Additional Information About HTML 
Elements. 


HTML Attributes 

• HTML elements can have attributes 

• Attributes provide additional information about an element 

• Attributes are always specified in the start tag 

• Attributes come in name/value pairs like: name="value" 
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Example of an Attribute 


HTML links are defined with the <a> tag. The link address 
specified in the href attribute: 

Try this Example 

<a href="http://www.google.com">This is a link</a> 
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Always Quote Attribute Values 


Attribute values should always be enclosed in quotes. 

name="value" 

Double style quotes are the most common, but single style quotes 
are also allowed. 

name=‘value’ 

In some rare situations, when the attribute value itself contains 
quotes, it is necessary to use single quotes: name=‘Dele 
"ShotGun" Dickson’ 

NOTE: Attribute names and attribute values are case- 
insensitive. 
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HTML Attributes Reference 


Some attributes that can be used on any HTML element: 


Attribute 

Description 

class 

Specifies one or more classnames for an element (refers to a 
class in a style sheet) 

id 

Specifies a unique id for an element 

style 

Specifies an inline CSS style for an element 

title 

Specifies extra information about an element (displayed as a 
tool tip) 
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5.0 HTML HEADINGS 
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HTML Headings 


Headings are defined with the <h1 > to <h6> tags. 

<h1> defines the most important heading. <h6> defines the least 
important heading. 

Try this Example: 

<h1>This is a heading</h1> 

<h2>This is a heading</h2> 

<h3>This is a heading</h3> 
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How To Use Html Headings 


Use HTML headings for headings only. Don't use headings to 
make text BIG or bold. 

Search engines use your headings to index the structure and 
content of your web pages. 

Since users may skim your pages by its headings, it is important 
to use headings to show the document structure. 

HI headings should be used as main headings, followed by H2 
headings, then the less important H3 headings, and so on. 
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HTML Lines 


The <hr>tag creates a horizontal line in an HTML page. 

The hr element can be used to separate content: 

Try this Example: 

<p>This is a paragraph.</p> 

<hr> 

<p>This is a paragraph.</p> 

<hr> 

<p>This is a paragraph.</p> 
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HTML Comments 


Comments can be inserted into the HTML code to make it more 
readable and understandable. Comments are ignored by the 
browser and are not displayed. 

Comments are written like this: 


<!-- This is a comment --> 


Try it out 
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EXERCISE: Run The Following Codes For Different 
Headings 


<!DOCTYPE html> 
<html> 

<body> 


<hl>This 

is 

heading 

l</hl> 

<h2>This 

is 

heading 

2</h2> 

<h3>This 

is 

heading 

3</h3> 

<h4>This 

is 

heading 

4</h4> 

<h5>This 

is 

heading 

5</h5> 

<h6>This 

is 

heading 

6</h6> 


</body> 

</html> 
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EXERCISE 2: Run The Following Codes For 
Hidden Comments 


<!DOCTYPE html> 
<html> 

<body> 


<!--This comment will not be displayed--> 
<p>This is a regular paragraph</p> 

</body> 

</html> 
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EXERCISE 3: Run The Following Codes 
For Horizontal Rule 


<!DOCTYPE html> 

<html> 

<body> 

<p>The hr tag defines a horizontal rule:</p> 
<hr> 

<p>This is a paragraph.</p> 

<hr> 

<p>This is a paragraph.</p> 

<hr> 

<p>This is a paragraph.</p> 

</body> 

</html> 
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6.0 HTML TEXT FORMATTING 


ECHOMYKE 



HTML Formatting Tags 

HTML uses tags like <b> and <i> for formatting output, like bold or italic text. 

Example: 

<!DOCTYPE html> 

<html> 

<body> 

<pXb>This text is bold</bX/p> 

<pXstrong>This text is strong</strongX/p> 

<pXi>This text is italic</ix/p> 

<pXem>This text is emphasized</emX/p> 

<pXcode>This is computer output</codeX/p> 

<p>This is<sub> subscript</sub> and <sup>superscript</supX/p> 

</body> 

</html> 
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Preformatted Text 


Example: How to formatted code for an Address 

<!DOCTYPE html> 

<html> 

<body> 

<address> 

Written by Echomyke Academy.com<br> 

<a href= M mailto:info@example.org">Email us</aXbr> 
Address: P.0 Box 234 Lagos<br> 

Phone: +234-705-534-0422 
</address> 

</body> 

</html> 
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Abbreviations And Acronyms 

How to handle abbreviations and acronyms. 

Example: 

<!DOCTYPE html> 

<html> 

<body> 

<p>The <abbr title= M World Health Organization M >WHO</abbr> was 
founded in 1948.</p> 

<p>Can I get this <abbr title= M as soon as 
possible M >ASAP</abbr>?</p> 

<p>The title attribute is used to show the spelled-out version 
when holding the mouse pointer over the acronym or 
abbreviation.</p> 

</body> 

</html> 
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QUOTATIONS 

<!DOCTYPE html> 
<html> 

<body> 


<h2>The &lt;blockquote&gt; tag</h2> 

<p>The &lt;blockquote&gt; tag specifies a section that is quoted from 
another source.</p> 

<p>Here is a quote from WWF's website:</p> 

<blockquote cite="http://www.worldwildlife.org/who/index.html"> 

For 50 years, WWF has been protecting the future of nature. The 
world's leading conservation organization, WWF works in 100 countries 
and is supported by 1.2 million members in the United States and 
close to 5 million globally. 

</blockquote> 

<pXb>Note :</b> Browsers usually indent Sit;blockquote&gt; 
elements,</p> 


<h2>The &lt;q&gt; tag</h2> 

<p>The &lt;q&gt; tag defines a short quotation.</p> 
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Deleted And Inserted 


<!DOCTYPE html> 

<html> 

<body> 

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p> 

<p>Notice that browsers will strikethrough deleted text and 
underline inserted text.</p> 


</body> 

</html> 
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HTML Text Formatting Tags 


Tag 

Description 

<b> 

Defines bold text 

<em> 

Defines emphasized text 

<i> 

Defines a part of text in an alternate voice or mood 

<small> 

Defines smaller text 

<strong> 

Defines important text 

<sub> 

Defines subscripted text 

<sup> 

Defines superscripted text 

<ins> 

Defines inserted text 

<del> 

Defines deleted text 
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HTML Citations, Quotations, And Definition Tags 


Tag 

Description 

<abbr> 

Defines an abbreviation or acronym 

<address> 

Defines contact information for the author/owner of 

a document 

<bdo> 

Defines the text direction 

<blockquote> 

Defines a section that is quoted from another 

source 

<q> 

Defines an inline (short) quotation 
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How To Link 


Links allow YOU to click or link from page to page: 

Example: 

<!DOCTYPE html> 

<html> 

<body> 

<p> 

<a href=http://localhost/example/class.html M >HTML Tutorial</a> 
This is a link to a page on this website. 

</p> 

<p> 

<a href="http://www.facebook.com/">Facebook</a> This is a link 
to a website on the World Wide Web. 

</p> 

</body> 

</html> 



HTML Hyperlinks (Links) 


The HTML <a> tag defines a hyperlink. 

A hyperlink (or link) is a word, group of words, or image that you 
can click on to jump to another document. 

When you move the cursor over a link in a Web page, the arrow 
will turn into a little hand. 

The most important attribute of the <a> element is the href 
attribute, which indicates the link’s destination. 

By default, links will appear as follows in all browsers: 

• An unvisited link is underlined and blue 

• A visited link is underlined and purple 

• An active link is underlined and red 
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HTML Link Syntax 


The HTML code for a link is simple. It looks like this: 

<a href=" url">Link text</ a> 

The href attribute specifies the destination of a link. 

Example: 

<a href= M http://www.echomyketechnologies.com/">Visit 
EchomykeC/a> 

which will display like this: Visit Echomyke 

Clicking on this hyperlink will send the user to Echomyke’s homepage. 

Remember: The "Link text ' doesn't have to be a text. It can be an image or 
any other HTML element. 
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HTML Links - The Target Attribute 


The target attribute specifies where to open the linked document. 

The example below will open the linked document in a new 
browser window or a new tab: 

<a href= M http://www.google.com/" target= M _blank M >Visit 
Google!</a> 
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HTML Links - The Id Attribute 


The id attribute can be used to create a bookmark inside an 
HTML document. 

Tip: Bookmarks are not displayed in any special way. They are 
invisible to the reader. 

Example 

An anchor with an id inside an HTML document: 

<a id="tips">Useful Tips Section</a> 

Create a link to the "Useful Tips Section" inside the same document 
<a href="#tips">Visit the Useful Tips Section</a> 

Or, create a link to the "Useful Tips Section" from another page: 

<a href="http://localhost/example/class.html#tips"> 

Visit the Useful Tips Section</a> 
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Exercise 


<!DOCTYPE html> 

<html> 

<body> 

<p>Create a link of an image: 

<a href="class.html"> 

<img src="css/img/bx_loader.gif" alt="HTML tutorial" width="32" 
heigh t=" 32 "X/aX/p> 

<p>No border around the image, but still a link: 

<a href="class.html"> 

<img border="0" src="css/img/bx_loader.gif" alt="HTML tutorial" 
width="32" height="32 "X/aX/p> 

</body> 

</html> 
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8.0 HTML <Head> 
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<title> - Define A Title For An HTML Document 

Use the <title> tag to define a title for a document. 

Example: 

<!DOCTYPE html> 

<html> 

<head> 

<title>My first HTML page</title> 

</head> 

<body> 

<p>The content of the body element is displayed in the browser.</p> 

<p>The content of the title element is displayed in the browser's 
title.</p> 

</body> 

</html> 
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<meta> - Provide Metadata For An HTML 
Document 


Use <meta> elements to specify a description, keywords, author, and 
character set of a document. 

<!DOCTYPE html> 

<html> 

<head> 

<meta name="description" content="Web Programming tutorials'^ 
<meta name="keywords" content="HTML,CSS,JavaScript"> 

<meta name="author" content="Echomyke Academy> 

<meta charset="UTF-8"> 

</head> 

<body> 

<p>All meta information goes in the head section...</p> 


</body> 

</html> 
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The HTML <Head> Element 


The <head> element is a container for all the head elements. 
Elements inside <head> can include scripts, instruct the browser 
where to find style sheets, provide meta information, and more. 


The following tags can be added to the head section: <title>, 
<style>, <meta>, <link>, <script>, <noscript>, and <base>. 
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The HTML <title> Element 


The <title> tag defines the Title of the document. 

The <title> element is required in all HTML/XHTML documents. 
The <title> element: 

• defines a title in the browser toolbar 

• provides a title for the page when it is added to favorites 

• displays a title for the page in search-engine results 
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Example 


<!DOCTYPE html> 

<html> 

<head> 

<title>Title of the document</title> 
</head> 

<body> 

The content of the document. 

</body> 

</html> 
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The HTML <link> Element 


The <link> tag defines the relationship between a document and 
an external resource. 

The <link> tag is most used to link to style sheets: 


<head> 

<link rel="stylesheet" type="text/css 
href="mystyle.css"> 

</head> 
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The HTML <style> Element 


The <style> tag is used to define style information for an HTML 
document. 

Inside the <style> element you specify how HTML elements 
should render in a browser: 


<head> 

<style type="text/css"> 
body {background-color:yellow} 
p {color:blue} 

</style> 

</head> 
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The HTML <meta> Element 


Metadata is data (information) about data. 

The <meta> tag provides metadata about the HTML document. 
Metadata will not be displayed on the page, but will be machine 
parsable. 

Meta elements are typically used to specify page description, 
keywords, author of the document, last modified, and other 
metadata. 


The metadata can be used by browsers (how to display content or 
reload page), search engines (keywords), or other web services. 

<meta> tags always goes inside the <head> element. 
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Use of <meta> Tags 


Define keywords for search engines: 

<meta name="keywords" content="HTML, CSS, XHTML, 

JavaScript M > 

Define a description of your web page: 

<meta name= M description n content="Web Programming Tutorials 

"> 

Define the author of a page: 

<meta name="author" content="Echomyke Academy M > 


Refresh document every 30 seconds: 

<meta http-equiv="refresh" content= M 30"> 
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The Html <script> Element 


The <script> tag is used to define a client-side script, such as a 
JavaScript. 

The <script> element will be explained in details later in the 
lecture. 
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Summary of HTML head Elements 


Tag 

Description 

<head> 

Defines information about the document 

<title> 

Defines the title of a document 

<base> 

Defines a default address or a default target for all links on a page 

<link> 

Defines the relationship between a document and an external resource 

<meta> 

Defines metadata about an HTML document 

<script> 

Defines a client-side script 

<style> 

Defines style information for a document 
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9.0 HTML STYLES - CSS 


ECHOMYKE 



Example 


<!DOCTYPE html> 

<html> 

<head> 

<style type="text/css"> 
hi {color:red;} 
h2 {color:blue;} 
p {color:green;} 

</style> 

</head> 

<body> 

<hl>All header 1 elements will be red</hl> 
<h2>All header 2 elements will be blue</h2> 
<p>All text in paragraphs will be green.</p> 
</body> 

</html> 
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Styling HTML With CSS 

CSS (Cascading Style Sheets) is used to style HTML elements. 
CSS can be added to HTML in the following ways: 

• Inline - using the style attribute in HTML elements 

• Internal - using the <style> element in the <head> section 

• External - using an external CSS file 

The preferred way to add CSS to HTML, is to put CSS syntax in 
separate CSS files. 

However, in this HTML tutorial we will introduce you to CSS using 
the style attribute. This is done to simplify the examples. It also 
makes it easier for you to edit the code and try it yourself. 
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CSS Can Be Added To HTML In The 
Following Ways 

1. Inline Styles 

<p style="color:blue;margin-left:2Opx;">This is a 
paragraph.</p> 


An inline style can be used if a unique style is to be applied to one single 
occurrence of an element. 

To use inline styles, use the style attribute in the relevant tag. The style 
attribute can contain any CSS property. The example above shows how 
to change the text color and the left margin of a paragraph: 
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Example of Inline style - Background Color 


The background-color property defines the background color for 
an element: 

<!DOCTYPE html> 

<html> 

<body style="background-color:yellow;"> 

<h2 style="background-color:red;">This is a 
heading</h2> 

<p style="background-color:green;">This is a 
paragraph.</p> 

</body> 

</html> 
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Example of Inline style - Font, Color & Size 

The font-family, color, and font-size properties defines the 
font, color, and size of the text in an element: 


<!DOCTYPE html> 

<html> 

<body> 

<hl style="font-family:verdana;">A heading</hl> 
<p style="font-family:arial;color:red;font- 
size:2Opx;">A paragraph.</p> 

</body> 

</html> 
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Example of Inline style - Text Alignment 


The text-align property specifies the horizontal alignment of 
text in an element: 


<!DOCTYPE html> 

<html> 

<body> 

<hl style="text-align:center;">Center-aligned 
heading</hl> 

<p>This is a paragraph.</p> 

</body> 

</html> 
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Second Way CSS Can Be Added To HTML 


2. Internal Style Sheet 

An internal style sheet can be used if one single document has a 
unique style. Internal styles are defined in the <head> section of 
an HTML page, by using the <style> tag, 

Example: 

<head> 

<style type="text/css"> 

body {background-color:yellow;} 

p {color:blue;} 

</style> 

</head> 
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Third Way CSS Can Be Added To 
HTML 


3. External Style Sheet 

An external style sheet is ideal when the style is applied to many 
pages. With an external style sheet, you can change the look of 
an entire Web site by changing one file. Each page must link to 
the style sheet using the <link> tag. The <link> tag goes inside the 
<head> section: 


<head> 

<link rel="stylesheet" type="text/css 
href="mystyle.css"> 

</head> 
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Exercise 


<!DOCTYPE html> 
<html> 

<body> 


<a href="http://www.google.com" style= n text- 
decoration :none;">Visit google.com!</a> 


</body> 

</html> 
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HTML Style Tags 


Tag 

Description 

<style> 

Defines style information for a document 

<link> 

Defines the relationship between a document and an external 

resource 
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10. HTML IMAGES 
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The <img> Tag And The Src Attribute 


In HTML, images are defined with the <img> tag. 

The <img> tag is empty, which means that it contains attributes 
only, and has no closing tag. 

To display an image on a page, you need to use the src attribute. 
Src stands for "source". 

The value of the src attribute is the URL of the image you want to 
display. 
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Syntax For Defining An Image: 

<img src="urJ" alt ="display_text"> 

The URL points to the location where the image is stored. An 
image named “box_loader.gif, located in the "images" directory 
on “localhost" has the URL: 
http://localhost/img/css/box_loader.gif. 

The browser displays the image where the <img> tag occurs in 
the document. If you put an image tag between two paragraphs, 
the browser shows the first paragraph, then the image, and then 
the second paragraph. 
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The Alt Attribute 


The required alt attribute specifies an alternate text for an image, 
if the image cannot be displayed. 

The value of the alt attribute is an author-defined text: 


<img src="box loader.gif" alt="Loader"> 
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Height And Width Of An Image 

The height and width attributes are used to specify the height and 
width of an image. 

The attribute values are specified in pixels by default: 

<img src="picture.jpg" alt="Sample Picture" width="304" 
height="22 8"> 
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Question 


Why is it important to specify the 
height and width attribute for an 

image? 
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Answer 


If these attributes are set, the space required for the image is 
reserved when the page is loaded. 


However, without these attributes, the browser does not know the 
size of the image. The effect will be that the page layout will 
change while the images load. 
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Important note 


Make sure that the images actually stay in the same spot in 
relation to the web page, otherwise your visitors will get a broken 
link icon. The broken link icon is shown if the browser cannot find 
the image. 
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Exercise 


<!DOCTYPE html> 
<html> 

<body> 


<p>An image from another folder:</p> 

<img src="/img/picture.gif" alt="Sample Picture" width="33" 
height="32"Xp>An image from My Localhost :</p> 


</body> 

</html> 
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Exercise 

<!DOCTYPE html> 

<html> 

<body> 


<P> 

<img src="picture.gif" alt="Smiley face" style="float:left" 

width="32" height="32"> A paragraph with an image. The image will 
float to the left of this text. 

</p> 


<P> 

<img src="picture.gif" alt="Smiley face" style="float:right" 

width="32" height="32"> A paragraph with an image. The image will 
float to the right of this text. 

</p> 


</body> 

</html> 
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HTML Tables 


Tables are defined with the <table> tag. 

A table is divided into rows (with the <tr> tag), and each row is 
divided into data cells (with the <td> tag), td stands for "table 
data," and holds the content of a data cell. A <td> tag can contain 
text, links, images, lists, forms, other tables, etc. 
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Example 

<table border="l n > 


<tr> 

<td>row 1 
<td>row 1 
</tr> 

<tr> 

<td>row 2 
<td>row 2 
</tr> 
</table> 


cell l</td> 
cell 2</td> 


cell l</td> 
cell 2</td> 
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HTML Tables And The Border Attribute 


If you do not specify a border attribute, the table will be displayed 
without borders. Sometimes this can be useful, but most of the 
time, we want the borders to show. 

To display a table with borders, specify the border attribute: 

<table border="l"> 

<tr> 

<td>Row 1, cell l</td> 

<td>Row 1, cell 2</td> 

</tr> 

</table> 
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HTML Table Headers 

Header information in a table are defined with the <th> tag. 

All major browsers display the text in the <th> element as bold 
and centered. 

Example 

<table border="l"> 

<tr> 

<th>Header l</th> 

<th>Header 2</th> 

</tr> 

<tr> 

<td>row 1, cell l</td> 

<td>row 1, cell 2</td> 

</tr> 

<tr> 

<td>row 2, cell l</td> 

<td>row 2, cell 2</td> 

</tr> 

</table> 
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Short Method 


On the Dreamweaver page, Click the Insert Tab, then click 
Table. 


INSERT=*TABLE 
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HTML LISTS 



HTML Lists 


The most common HTML lists are ordered and unordered lists: 


An ordered list: 

An unordered list: 

1 .The first list item 

•List item 

2.The second list item 

•List item 

3.The third list item 

•List item 


ECHOMYKE 





HTML Unordered Lists 


An unordered list starts with the <ul> tag. Each list item starts with 
the <li> tag. 

The list items are marked with bullets (typically small black 
circles). 


<ul> 

<li>Obama</li> 
<li>Jonathan</li> 
</ul> 
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Example 


<!DOCTYPE html> 
<html> 

<body> 


<h4>List of Past Presidents :</h4> 

<ul> 

<li>OBJ</li> 

<li>YAR'DUA</li> 

<li>JONATHAN</li> 

</ul> 

</body> 

</html> 
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HTML Ordered Lists 


An ordered list starts with the <ol> tag. Each list item starts with 
the <li> tag. 

The list items are marked with numbers. 


<ol> 

<li>100 Level</li> 
<li>200 Level</li> 
</ol> 
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Example 


<!DOCTYPE html> 
<html> 

<body> 


<h4>List of Past Presidents :</h4> 
<ul> 

<li>OBJ</li> 

<li>YAR'DUA</li> 
<li>JONATHAN</li> 

</ul> 

</body> 

</html> 
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Types Of Unordered Lists 
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<h4>Disc bullets list 


<ul style="list-style 
<li>John</li> 
<li>James</li> 
<li>Jonah</li> 
<li>Johnson</li> 

</ul> 
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Disc Type 


</h4> 

type:disc"> 



Cycle Type 


<h4>Disc bullets list:</h4> 

<ul style="list-style-type:circle"> 
<li>John</li> 

<li>James</li> 

<li>Jonah</li> 

<li>Johnson</li> 

</ul> 
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Square Type 


<h4>Square bullets list:</h4> 

<ul style="list-style-type:square"> 
<li>John</li> 

<li>James</li> 

<li>Jonah</li> 

<li>Johnson</li> 

</ul> 
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Types Of Ordered Lists 




<h4>Letters list:</h4> 
<ol type="A"> 
<li>Jane</li> 
<li>Jenifer</li> 
<li>Justina</li> 
<li>Jessica</li> 
</ol> 
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Capital Letter 


Lowercase Letters 


<h4>Lowercase letters list:</h4> 
<ol type="a"> 

<li>Apples</li> 

<li>Bananas</li> 

<li>Lemons</li> 

<li>Oranges</li> 

</ol> 
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<h4>Roman numbers list:</h4> 
<ol type="I"> 
<li>Apples</li> 
<li>Bananas</li> 
<li>Lemons</li> 
<li>Oranges</li> 

</ol> 
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Roman Numbers 



Lowercase Roman Numbers 


<h4>Lowercase Roman numbers list:</h4> 
<ol type="i"> 

<li>Apples</li> 

<li>Bananas</li> 

<li>Lemons</li> 

<li>Oranges</li> 

</ol> 
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<h4>Basic Amenities:</h4> 
<ul> 

<li>Shelter</li> 
<li>Food 
<ul> 

<li>Garri</li> 
<li>Rice</li> 

</ul> 

</li> 

<li>Clothing</li> 


</ul> 


How To Nest Lists 
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<h4>Basic Amenities:</h4> 
<ul> 

<li>Shelter</li> 

<li>Food 

<ul> 

<li>Garri</li> 

<li>Rice 

<ul> 

<li>Ofada</li> 
<li>Imported</li> 
</ul> 

</li> 

</ul> 

</li> 

<li>Clothing</li> 


</ul> 


Nested Example 



HTML Description Lists 


A description list is a list of terms/names, with a description of 
each term/name. 

The <dl> tag defines a description list. 

The <dl> tag is used in conjunction with <dt> (defines 
terms/names) and <dd> (describes each term/name): 


<dl> 

<dt>Students</dt> 

<dd>- male or female</dd> 
<dt>Pastors</dt> 

<dd>- Rich or Poor</dd> 

</dl> 
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HTML List Tags 


Tag 

Description 

<ol> 

Defines an ordered list 

<ul> 

Defines an unordered list 

<li> 

Defines a list item 

<dl> 

Defines a description list 

<dt> 

Defines a term/name in a description list 

<dd> 

Defines a description of a term/name in a description list 
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12. HTML <Div> And <Span> 
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HTML Block Elements 


• Most HTML elements are defined as block level elements or as 
inline elements. 

• Block level elements normally start (and end) with a new line 
when displayed in a browser. 

Examples: <h1>, <p>, <ul>, <table> 
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HTML Inline Elements 


• Inline elements are normally displayed without starting a new 
line. 


Examples: <b>, <td>, <a>, <img> 
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The HTML <div> Element 


The HTML <div> element is a block level element that can be 
used as a container for grouping other HTML elements. 

The <div> element has no special meaning. Except that, 
because it is a block level element, the browser will display a 
line break before and after it. 

When used together with CSS, the <div> element can be used 
to set style attributes to large blocks of content. 

Another common use of the <div> element, is for document 
layout. It replaces the "old way" of defining layout using tables. 
Using <table> elements for layout is not the correct use of 
<table>. The purpose of the <table> element is to display 
tabular data. 
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Styling A Div 


<div style="color:#OOOOFF"> 

<h3>This is a heading</h3> 
<p>This is a paragraph.</p> 
</div> 
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The HTML <Span> Element 


• The HTML <span> element is an inline element that can be 
used as a container for text. 

• The <span> element has no special meaning. 

• When used together with CSS, the <span> element can be 
used to set style attributes to parts of the text. 
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Example 


<p>I will buy a <span style="color:blue;font- 
weight :bold n >blue</span> Ferrari next Month and 
a <span style=”color:darkolivegreen;font- 
weight : bold">dark green</span> Bugatti.</p> 
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13. HTML LAYOUTS 
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Layout Example Using <div> elements 


<div id="container" style="width:500px;"> 

<div id="header" style="background-color:#FF0000;"> 

<hl style="margin-bottom: 0; ">Welcome To My Home Page</hlX/div> 

<div id="menu" style="background-color: 

#66CCFF;height:200px;width:lOOpx;float:left;"> 

<b>Menu</bXbr> 

HTML<br> 

CSS<br> 

JavaScript</div> 


<div id="content" style="background- 

color:#EEEEEE;height:2OOpx;width:400px;float:left;"> 

Content of the Website goes here</div> 


<div id="footer" style="background-color:#FF0000/clear:both;text- 
align:center;"> 

Copyright © mywebsite.com</div> 
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Mem Content of the Website sees heie 

iLr 

HTML 

CSS 

JavaScript 
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Layout Example Using <table> elements 


<table width="500" border="0"> 

<tr> 

<td colspan="2" style="background-color:#FFA500;"> 

<hl>Main Title of Web Page</hl> 

</td> 

</tr> 

<tr> 

<td style="background-color:#FFD700/width:lOOpx;"> 

<b>Menu</bXbr> 

HTML<br> 

CSS<br> 

JavaScript 
</td> 

<td style="background-color:#eeeeee;height:20Opx;width:40Opx;"> 
Content goes here</td> 

</tr> 

<tr> 

<td colspan="2" style="background-color:#FFA500;text-align:center;"> 
Copyright © yourwebsite.com</td> 

</tr> 

</table> 
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HTML FORMS AND INPUT 
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HTML Forms 


HTML forms are used to pass data to a server. 

An HTML form can contain input elements like text 
fields, checkboxes, radio-buttons, submit buttons and 
more. A form can also contain select lists, textarea, 
fieldset, legend, and label elements. 
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HTML Form tag <form> 

The <form> tag is used to create an HTML form: 

<!DOCTYPE html> 

<html> 

<body> 

<form> 

input elements 

</form> 

</body> 

</html> 

Note: The default width of a text field is 20 characters. 
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HTML Forms - The Input Element 


The most important form element is the <input> 
element. 

The <input> element is used to select user information. 

An <input> element can vary in many ways, depending 
on the type attribute. An <input> element can be of 
type text field, checkbox, password, radio button, 
submit button, and more. 
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Text Fields 


<input type="text"> defines a one-line input field that a user can 
enter text into: 


<form> 

First name: <input type="text" name="firstname"Xbr> 
Last name: <input type="text" name="lastname"> 

</form> 
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Password Field 


cinput type="password"> defines a password field 


<form> 

Password: cinput type="password" name="pwd"> 
</form> 
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Radio Buttons 


cinput type="radio"> defines a radio button. Radio buttons let a 
user select ONLY ONE of a limited number of choices: 


<form> 

Male cinput type= n radio" name="sex" value="male"xbr> 
Female cinput type="radio" name="sex" value="female"> 
</ form> 
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Checkboxes 


cinput type="checkbox"> defines a checkbox. Checkboxes let a 
user select options of a limited number of choices. 


<form> 

Novice <input type="checkbox" name="knowledge" 
value="novice"xbr> 

Expert<input type="checkbox" name="Knowledge" 
value="Expert"> 

</form> 
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Submit Button 


cinput type="submit"> defines a submit button. 

A submit button is used to send form data to a server. The data is 
sent to the page specified in the form's action attribute. The file 
defined in the action attribute usually does something with the 
received input: 

<form name="input" action="html_form_action.asp" 
method="post M > 

Username: <input type= n text n name="user"> 

<input type="submit" value="Submit"> 

</form> 
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Drop down list 

<!DOCTYPE html> 

<html> 

<body> 

<form action=""> 

<label>State of Origin</label> 

<select name="state"> 

<option value="select">Select Option</option> 
<option value="Edo M >Edo</option> 

<option value="Rivers">Rivers</option> 

<option value="Lagos">Lagos</option> 

<option value="Benue">Benue</option> 

</select> 

</form> 

</body> 

</html> 
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<!DOCTYPE html> 

Drop down list 2 

<form action=""> 

<label>Types of Classes</label> 

<select> 

<option value="Select">Select Class</option> 

<optgroup label="Beginners Class"> 

<option value="html">HTML</option> 

<option value="css">CSS</option> 

</optgroup> 

<optgroup label="Advance Class'd 

<option value="asp">ASP.NET</option> 

<option value="mobile">MOBILE APPS</option> 

</optgroup> 

</select> </form> 

</body> 

</html> 


<html> 

<body> 
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Creating a button 

<!DOCTYPE html> 

<html> 

<body> 

<form action=""> 

<label>State of Origin</label> 

<select name="state"> 

<option value="select">Select Option</option> 
<option value="Edo M >Edo</option> 

<option value="Rivers">Rivers</option> 

<option value="Lagos">Lagos</option> 

<option value="Benue">Benue</option> 

<input type= M button" value="Submit M > 

</select> 

</form> 

</body> 

</html> 


Creating a Textarea 

<!DOCTYPE html> 

<html> 

<body> 

<form action=""> 

<input type= n button" value="Submit"> 
<textarea></textarea> 

</form> 

</body> 

</html> 
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Creating a Field set 

<!DOCTYPE html> 

<html> 

<body> 

<form action=""> 

<fieldset> 

<legend>Provide your details below:</legendxbr> 
Name: <input type="text" size="30"><br><br> 
E-mail: <input type= M text" size="30"xbr><br> 
Phone Number: <input type="text" size="30"> 

</fieldset> 

</form> 

</body> 

</html> 
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HTML Form Tags 


Tag 

Description 

<form> 

Defines an HTML form for user input 

<input> 

Defines an input control 

<textarea> 

Defines a multiline input control (text area) 

<label> 

Defines a label for an <input> element 

<fieldset> 

Groups related elements in a form 

<legend> 

Defines a caption for a <fieldset> element 

<select> 

Defines a drop-down list 

<optgroup> 

Defines a group of related options in a drop-down 
list 

<option> 

Defines an option in a drop-down list 

<button> 

Defines a clickable button 
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